<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="tfn" uri="http://www.totoro.com/functions" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天猫tmall.com--理想生活上天猫</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="keywords" content="线上购物，综合性购物平台，正品保障，服饰鞋包，美妆护肤，家电数码，时尚大牌，母婴玩具，家具建材">
    <meta name="description"
          content="天猫 -  中国线上购物的网站，亚洲超大的综合性购物平台，2000品类，70000个品牌，正品保障，全新一站式购物体验。涵盖服饰鞋包，美妆护肤，家电数码，时尚大牌，母婴玩具，家具建材等品类，提供优质的品牌商品和服务,为消费者带来全方位的生活时尚！ ">
    <link rel="shortcut icon" type="image/x-icon" href="/static/img/index/favicon.png">
    <link rel="stylesheet" type="text/css" href="static/css/home.css">
    <link rel="stylesheet" type="text/css" href="static/css/nav.css">
    <link rel="stylesheet" type="text/css" href="static/iconFont/iconfont.css">
    <link rel="stylesheet" href="static/css/search_return.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/chat_other_element.css"/>
    <!-- js部分，vue jquery 懒加载插件 -->
    <script src="static/js/frame/jquery-3.5.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/frame/jquery.lazyload.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/self/buy/mousedrag.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/frame/totoro-utils.js"></script>
    <script src="/static/js/self/index.js"></script>
    <script src="//unpkg.com/vue/dist/vue.js"></script>
    <script src="//unpkg.com/element-ui@2.15.1/lib/index.js"></script>
    <style>
        /**
        element 轮播图 ，导入element-css
         */
        @import url("//unpkg.com/element-ui@2.15.1/lib/theme-chalk/index.css");

        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 150px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }

        #footer, #site-nav {
            font-family: "Microsoft YaHei", tahoma, arial, 'Hiragino Sans GB', '\5b8b\4f53', sans-serif;
        }

        .title:hover{
            cursor: move;
        }
    </style>
</head>
<body>

<jsp:include page="/public_page/open_chat.jsp"></jsp:include>


<!-- top-con 顶部图片 -->
<div data-spm="2015001" class="top-con j_top" style="position:relative;display:block;height:px">
    <div style="background:#ff0037;width:50%;position:absolute;left:0;height:100%;"></div>
    <div style="background:#ff0037;width:50%;position:absolute;right:0;height:100%;"></div>
    <img src="//img.alicdn.com/imgextra/i1/O1CN01sGmMSK21GM6gOP6bQ_!!6000000006957-0-tps-990-80.jpg"
         style="position:relative;top:0;margin:0 auto;z-index:10;left: 50%;transform: translate(-50%, 0%);" width="990"
         height="">


    <a aria-label="" href='/' style="display: block;width:100%;position:absolute;left:0;top:0;height:100%;z-index:100;">
        <img alt="" src="//g.alicdn.com/s.gif" width="100%" height="100%">
    </a>
</div>
<!-- end top-con -->
<!-- site-nav -->
<jsp:include page="${pageContext.request.contextPath}/public_page/nav.jsp"></jsp:include>
<!-- end site-nav -->
<!-- <header -->
<div id="header">
    <div class="container hd-container clear">
        <h1 class="hd-logo">
            <a href="/"><img width="240px" height="130px" src="static/img/index/logo.gif" title="天猫tmall.com"
                             alt="tmall"></a>
        </h1>
        <div class="hd-extra form">
            <div class="hd-search">
                <form method="get" action="/search_product.htm" id="search">
                    <fieldset>
                        <legend>天猫搜索</legend>
                        <input type="text" name="enter" value="" class="search" title="请输入搜索内容" autocomplete="off">
                        <input type="submit" name="search-btn" value="搜索">
                    </fieldset>
                    <input type="hidden" name="spm" value="${tfn:getRandomChar(27)}">
                </form>
                <ul class="hd-hot-key">
                    <c:forEach items="${searchTextLists}" varStatus="vs" var="text">
                        <li class="${(vs.index+1) % 2 == 0?'key-highlight':''}"><a href="/search_product.htm?enter=${text.text}">${text.text}</a></li>
                    </c:forEach>
                </ul>
            </div>
            <ul class="search-tip">
            </ul>
        </div>
    </div>
</div><!-- end header -->
<!-- content -->
<div id="content">
    <!-- main-nav -->
    <div id="main-nav"><!-- 控制导航背景宽度100% -->
        <ul class="clear">
            <li>
                <a href="#">
                    <img src="static/img/index/tmchaoshi.png" alt="天猫超市">
                    <span class="hover-pic"></span>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="static/img/index/tmguoji.png" alt="天猫国际">
                    <span class="hover-pic"></span>
                </a>
            </li>
            <li>
                <a href="#">
                    天猫会员
                    <span class="hover-pic"></span>
                </a>
            </li>
            <li>
                <a href="#">
                    品牌街
                    <span class="hover-pic"></span>
                </a>
            </li>
            <li>
                <a href="#">
                    电器城
                    <span class="hover-pic"></span>
                </a>
            </li>
            <li>
                <a href="#">
                    喵鲜生
                    <span class="hover-pic"></span>
                </a>
            </li>
            <li>
                <a href="#">
                    医药馆
                    <span class="hover-pic"></span>
                </a>
            </li>
            <li>
                <a href="#">
                    营业厅
                    <span class="hover-pic"></span>
                </a>
            </li>
            <li>
                <a href="#">
                    魅力惠
                    <span class="hover-pic"></span>
                </a>
            </li>
            <li>
                <a href="#">
                    阿里旅行
                    <span class="hover-pic"></span>
                </a>
            </li>
        </ul>
    </div><!-- end main-nav -->
    <!-- catagory -->
    <div id="category">
        <div class="cg-content">
            <div class="cg-title">
                <i class="iconfont icon-liebiao"></i>
                <h2>商品分类</h2>
            </div>
            <ul class="cg-tab" id="cg-tab">
                <li class="nav-item nav-item0" data-color="#e54077">
                    <i class="iconfont icon-chunjishangxin-qunzi-"></i>
                    <a href="#">女装 /</a><a href="#">内衣</a>
                </li>
                <li class="nav-item nav-item1" data-color="#427def">
                    <i class="iconfont icon-nanzhuang"></i>
                    <a href="#">男装 /</a><a href="#">运动户外</a>
                </li>
                <li class="nav-item nav-item2" data-color="#6347ed">
                    <i class="iconfont icon-xiezi"></i>
                    <a href="#">女鞋 /</a><a href="#">男鞋 /</a><a href="#">箱包</a>
                </li>
                <li class="nav-item nav-item3" data-color="#e54077">
                    <i class="iconfont icon-kouhong"></i>
                    <a href="#">美妆 /</a><a href="#">个人护理</a>
                </li>
                <li class="nav-item nav-item4" data-color="#6347ed">
                    <i class="iconfont icon-zuanshi"></i>
                    <a href="#">腕表 /</a><a href="#">珠宝饰品 /</a><a href="#">眼镜</a>
                </li>
                <li class="nav-item nav-item5" data-color="#427def">
                    <i class="iconfont icon-shouji"></i>
                    <a href="#">手机 /</a><a href="#">数码 /</a><a href="#">电脑办公</a>
                </li>
                <li class="nav-item nav-item6" data-color="#fa5c5c">
                    <i class="iconfont icon-yingerche"></i>
                    <a href="#">母婴玩具</a>
                </li>
                <li class="nav-item nav-item7" data-color="#f7a831">
                    <i class="iconfont icon-mian"></i>
                    <a href="#">零食 /</a><a href="#">进口食品 /</a><a href="#">茶酒</a>
                </li>
                <li class="nav-item nav-item9" data-color="#427def">
                    <i class="iconfont icon-bingxiang"></i>
                    <a href="#">大家电 /</a><a href="#">生活电器</a>
                </li>
                <li class="nav-item nav-item10" data-color="#dd2727">
                    <i class="iconfont icon-jiajujiancai"></i>
                    <a href="#">家具器材</a>
                </li>
                <li class="nav-item nav-item11" data-color="#427def">
                    <i class="iconfont icon-qiche"></i>
                    <a href="#">汽车 /</a><a href="#">配件 /</a><a href="#">用品</a>
                </li>
                <li class="nav-item nav-item12" data-color="#f7a831">
                    <i class="iconfont icon-jiafangjiashi"></i>
                    <a href="#">家纺 /</a><a href="#">家饰 /</a><a href="#">鲜花</a>
                </li>
                <li class="nav-item nav-item13" data-color="#3bc7b0">
                    <i class="iconfont icon-yiyaobaojian"></i>
                    <a href="#">医药保健</a>
                </li>
                <li class="nav-item nav-item14" data-color="#dd2727">
                    <i class="iconfont icon-recha"></i>
                    <a href="#">厨具 /</a><a href="#">收纳 /</a><a href="#">宠物</a>
                </li>
                <li class="nav-item nav-item15" data-color="#3bc7b0">
                    <i class="iconfont icon-tushu"></i>
                    <a href="#">图书音像</a>
                </li>
                <li class="nav-item nav-item8" data-color="#f7a831">
                    <i class="iconfont icon-yingtao"></i>
                    <a href="#">生鲜水果</a>
                </li>
            </ul>
        </div><!-- end cg-content -->
        <div class="cg-detail" id="cg-detail">

            <!-- 控制分类 -->
            <c:forEach items="${categoryMapMap}" var="categoryOneMap" varStatus="vs">
                <div class="detail detail${vs.index} clear">
                    <div class="detail-word">
                        <c:forEach items="${categoryOneMap.value}" var="categoryTwoMap" varStatus="vs2">
                            <div class="hot-word-line clear">
                                <h3 data-cid="${categoryTwoMap.key.id}">
                                    <span>${categoryTwoMap.key.categoryName}<i class="iconfont icon-youjiantou"></i></span>
                                </h3>
                                <div class="line-con">
                                    <c:forEach items="${categoryTwoMap.value}" var="categoryThree" varStatus="vs3">
                                        <a class="${tfn:randomFunction()?'highlight':''}" href="/search_product.htm?enter=${categoryThree.categorySearchKeyword}${categoryThree.cid!=0?'&cat='+=categoryThree.cid:""}">${categoryThree.categoryName}</a>
                                    </c:forEach>
                                </div>
                            </div>
                        </c:forEach>
                    </div>
                </div><!-- end detail0 -->
            </c:forEach>
        </div><!-- end cg-detail -->
    </div><!-- end catagory -->
    <!-- banner -->
    <div id="banner">
        <template>
            <el-carousel height="500px" interval="4000">
                <c:forEach begin="0" end="${fn:length(carouselImages)-1}" varStatus="vs">
                    <el-carousel-item>
                        <div class="banner-bg bg${vs.index}"><!-- 宽度100%纯色背景层 -->
                            <div class="bn-container bn-container${vs.index}"><!-- 控制banner内容整体居中 -->
                                <div class="banner-con"><!-- 控制banner图片的宽度 -->
                                    <a class="big-banner" href="#"><img
                                            src="static/img/index/carousel/${carouselImages[vs.index]}"></a>
                                </div>
                            </div>
                        </div>
                    </el-carousel-item>
                </c:forEach>
                <!-- end slider-nav -->
            </el-carousel>
        </template>
    </div><!-- end banner -->
    <!-- hot-brand -->

    <!-- logo start -->
    <style>
        /*.brand-item img{*/
        /*    width: 122px;*/
        /*    height: 108px;*/
        /*}*/
    </style>

    <div class="j_newHotBrand new-hot-brand-con j_exposureCon">
        <ul class="brand-list">
            <li class="brand-item">
                <h4><img src="static/img/index/content/brand1.jpg" data-original="static/img/index/content/brand1.jpg">
                </h4>
                <div class="mask">
                    <i class="iconfont">&#xe635;</i>
                    <p>优惠券 ￥30</p>
                    <a href="#">点击进入</a>
                </div>
            </li>
            <li class="brand-item">
                <h4><img src="static/img/index/content/brand2.jpg" data-original="static/img/index/content/brand2.jpg">
                </h4>
                <div class="mask">
                    <i class="iconfont">&#xe635;</i>
                    <p>关注人数 108.1万</p>
                    <a href="#">点击进入</a>
                </div>
            </li>
            <li class="brand-item">
                <h4><img src="static/img/index/content/brand3.jpg" data-original="static/img/index/content/brand3.jpg">
                </h4>
                <div class="mask">
                    <i class="iconfont">&#xe635;</i>
                    <p>优惠券 ￥30</p>
                    <a href="#">点击进入</a>
                </div>
            </li>
            <li class="brand-item">
                <h4><img src="static/img/index/content/brand4.jpg" data-original="static/img/index/content/brand4.jpg">
                </h4>
                <div class="mask">
                    <i class="iconfont">&#xe635;</i>
                    <p>关注人数 108.1万</p>
                    <a href="#">点击进入</a>
                </div>
            </li>
            <li class="brand-item">
                <h4><img src="static/img/index/content/brand5.jpg" data-original="static/img/index/content/brand5.jpg">
                </h4>
                <div class="mask">
                    <i class="iconfont">&#xe635;</i>
                    <p>优惠券 ￥30</p>
                    <a href="#">点击进入</a>
                </div>
            </li>
            <li class="brand-item">
                <h4><img src="static/img/index/content/brand6.jpg" data-original="static/img/index/content/brand6.jpg">
                </h4>
                <div class="mask">
                    <i class="iconfont">&#xe635;</i>
                    <p>关注人数 108.1万</p>
                    <a href="#">点击进入</a>
                </div>
            </li>
            <li class="brand-item">
                <h4><img src="static/img/index/content/brand7.jpg" data-original="static/img/index/content/brand7.jpg">
                </h4>
                <div class="mask">
                    <i class="iconfont">&#xe635;</i>
                    <p>优惠券 ￥30</p>
                    <a href="#">点击进入</a>
                </div>
            </li>
            <li class="brand-item">
                <h4><img src="static/img/index/content/brand8.jpg" data-original="static/img/index/content/brand8.jpg">
                </h4>
                <div class="mask">
                    <i class="iconfont">&#xe635;</i>
                    <p>关注人数 108.1万</p>
                    <a href="#">点击进入</a>
                </div>
            </li>
            <li class="brand-item">
                <h4><img src="static/img/index/content/brand9.jpg" data-original="static/img/index/content/brand9.jpg">
                </h4>
                <div class="mask">
                    <i class="iconfont">&#xe635;</i>
                    <p>优惠券 ￥30</p>
                    <a href="#">点击进入</a>
                </div>
            </li>
            <li class="brand-item">
                <h4><img src="static/img/index/content/brand10.jpg"
                         data-original="static/img/index/content/brand10.jpg"></h4>
                <div class="mask">
                    <i class="iconfont">&#xe635;</i>
                    <p>关注人数 108.1万</p>
                    <a href="#">点击进入</a>
                </div>
            </li>
            <li class="brand-item">
                <h4><img src="static/img/index/content/brand11.jpg"
                         data-original="static/img/index/content/brand11.jpg"></h4>
                <div class="mask">
                    <i class="iconfont">&#xe635;</i>
                    <p>优惠券 ￥30</p>
                    <a href="#">点击进入</a>
                </div>
            </li>
            <li class="brand-item">
                <h4><img src="static/img/index/content/brand12.jpg"
                         data-original="static/img/index/content/brand12.jpg"></h4>
                <div class="mask">
                    <i class="iconfont">&#xe635;</i>
                    <p>关注人数 108.1万</p>
                    <a href="#">点击进入</a>
                </div>
            </li>
            <li class="brand-item">
                <h4><img src="" data-original="static/img/index/content/brand13.jpg"></h4>
                <div class="mask">
                    <i class="iconfont">&#xe635;</i>
                    <p>优惠券 ￥30</p>
                    <a href="#">点击进入</a>
                </div>
            </li>
            <li class="brand-item">
                <h4><img src="" data-original="static/img/index/content/brand14.jpg"></h4>
                <div class="mask">
                    <i class="iconfont">&#xe635;</i>
                    <p>关注人数 108.1万</p>
                    <a href="#">点击进入</a>
                </div>
            </li>
            <li class="brand-item">
                <h4><img src="" data-original="static/img/index/content/brand15.jpg"></h4>
                <div class="mask">
                    <i class="iconfont">&#xe635;</i>
                    <p>优惠券 ￥30</p>
                    <a href="#">点击进入</a>
                </div>
            </li>
            <li class="brand-item">
                <h4><img src="" data-original="static/img/index/content/brand16.jpg"></h4>
                <div class="mask">
                    <i class="iconfont">&#xe635;</i>
                    <p>关注人数 108.1万</p>
                    <a href="#">点击进入</a>
                </div>
            </li>
            <li class="brand-item">
                <h4><img src="" data-original="static/img/index/content/brand17.jpg"></h4>
                <div class="mask">
                    <i class="iconfont">&#xe635;</i>
                    <p>优惠券 ￥30</p>
                    <a href="#">点击进入</a>
                </div>
            </li>
            <li class="brand-item">
                <h4><img src="" data-original="static/img/index/content/brand18.jpg"></h4>
                <div class="mask">
                    <i class="iconfont">&#xe635;</i>
                    <p>关注人数 108.1万</p>
                    <a href="#">点击进入</a>
                </div>
            </li>
            <li class="brand-item">
                <h4><img src="" data-original="static/img/index/content/brand19.jpg"></h4>
                <div class="mask">
                    <i class="iconfont">&#xe635;</i>
                    <p>优惠券 ￥30</p>
                    <a href="#">点击进入</a>
                </div>
            </li>
            <li class="brand-item">
                <h4><img src="" data-original="static/img/index/content/brand20.jpg"></h4>
                <div class="mask">
                    <i class="iconfont">&#xe635;</i>
                    <p>关注人数 108.1万</p>
                    <a href="#">点击进入</a>
                </div>
            </li>
            <li class="brand-item">
                <h4><img src="" data-original="static/img/index/content/brand21.jpg"></h4>
                <div class="mask">
                    <i class="iconfont">&#xe635;</i>
                    <p>优惠券 ￥30</p>
                    <a href="#">点击进入</a>
                </div>
            </li>
            <li class="brand-item">
                <h4><img src="" data-original="static/img/index/content/brand22.jpg"></h4>
                <div class="mask">
                    <i class="iconfont">&#xe635;</i>
                    <p>关注人数 108.1万</p>
                    <a href="#">点击进入</a>
                </div>
            </li>
            <li class="brand-item">
                <h4><img src="" data-original="static/img/index/content/brand23.jpg"></h4>
                <div class="mask">
                    <i class="iconfont">&#xe635;</i>
                    <p>优惠券 ￥30</p>
                    <a href="#">点击进入</a>
                </div>
            </li>
            <li class="brand-item">
                <h4><img src="" data-original="static/img/index/content/brand24.jpg"></h4>
                <div class="mask">
                    <i class="iconfont">&#xe635;</i>
                    <p>优惠券 ￥30</p>
                    <a href="#">点击进入</a>
                </div>
            </li>
            <li class="brand-item">
                <h4><img src="" data-original="static/img/index/content/brand25.jpg"></h4>
                <div class="mask">
                    <i class="iconfont">&#xe635;</i>
                    <p>优惠券 ￥30</p>
                    <a href="#">点击进入</a>
                </div>
            </li>
            <li class="brand-item">
                <h4><img src="" data-original="static/img/index/content/brand26.jpg"></h4>
                <div class="mask">
                    <i class="iconfont">&#xe635;</i>
                    <p>优惠券 ￥30</p>
                    <a href="#">点击进入</a>
                </div>
            </li>
            <li class="brand-item">
                <h4><img src="" data-original="static/img/index/content/brand27.jpg"></h4>
                <div class="mask">
                    <i class="iconfont">&#xe635;</i>
                    <p>优惠券 ￥30</p>
                    <a href="#">点击进入</a>
                </div>
            </li>
            <li class="brand-item">
                <h4><img src="" data-original="static/img/index/content/brand28.jpg"></h4>
                <div class="mask">
                    <i class="iconfont">&#xe635;</i>
                    <p>优惠券 ￥30</p>
                    <a href="#">点击进入</a>
                </div>
            </li>
            <li class="brand-item">
                <h4><img src="" data-original="static/img/index/content/brand29.jpg"></h4>
                <div class="mask">
                    <i class="iconfont">&#xe635;</i>
                    <p>优惠券 ￥30</p>
                    <a href="#">点击进入</a>
                </div>
            </li>
            <li class="brand-fresh">
                <a href="#">
                    <i class="iconfont icon-huanyipi rotate-icon"></i>
                    <span>换一批</span>
                </a>
            </li>
        </ul><!-- end brand-list -->
    </div>
    <script>
        $(".brand-item").find("img").each(function (index, el) {
            $(this).attr("src", $(this).data("src"));
        })
    </script>

    <!-- logo end -->

    <!-- 之前版本的火热品牌，删除该模块 -->
    <div class="hot-brand module" style="display:none; visibility: hidden">
        <h3 class="module-title">热门品牌 <span>HOT BRANDS</span></h3>
        <div class="module-body clear">
            <div class="poster">
                <img src="static/img/index/content/brand.jpg" data-original="static/img/index/content/brand.jpg">
            </div>
            <ul class="brand-list">
                <li class="brand-item">
                    <h4><img src="static/img/index/content/brand1.jpg"
                             data-original="static/img/index/content/brand1.jpg"></h4>
                    <div class="mask">
                        <i class="iconfont">&#xe635;</i>
                        <p>优惠券 ￥30</p>
                        <a href="#">点击进入</a>
                    </div>
                </li>
                <li class="brand-item">
                    <h4><img src="static/img/index/content/brand2.jpg"
                             data-original="static/img/index/content/brand2.jpg"></h4>
                    <div class="mask">
                        <i class="iconfont">&#xe635;</i>
                        <p>关注人数 108.1万</p>
                        <a href="#">点击进入</a>
                    </div>
                </li>
                <li class="brand-item">
                    <h4><img src="static/img/index/content/brand3.jpg"
                             data-original="static/img/index/content/brand3.jpg"></h4>
                    <div class="mask">
                        <i class="iconfont">&#xe635;</i>
                        <p>优惠券 ￥30</p>
                        <a href="#">点击进入</a>
                    </div>
                </li>
                <li class="brand-item">
                    <h4><img src="static/img/index/content/brand4.jpg"
                             data-original="static/img/index/content/brand4.jpg"></h4>
                    <div class="mask">
                        <i class="iconfont">&#xe635;</i>
                        <p>关注人数 108.1万</p>
                        <a href="#">点击进入</a>
                    </div>
                </li>
                <li class="brand-item">
                    <h4><img src="static/img/index/content/brand5.jpg""
                        data-original="static/img/index/content/brand5.jpg"></h4>
                    <div class="mask">
                        <i class="iconfont">&#xe635;</i>
                        <p>优惠券 ￥30</p>
                        <a href="#">点击进入</a>
                    </div>
                </li>
                <li class="brand-item">
                    <h4><img src="static/img/index/content/brand6.jpg"
                             data-original="static/img/index/content/brand6.jpg"></h4>
                    <div class="mask">
                        <i class="iconfont">&#xe635;</i>
                        <p>关注人数 108.1万</p>
                        <a href="#">点击进入</a>
                    </div>
                </li>
                <li class="brand-item">
                    <h4><img src="static/img/index/content/brand7.jpg"
                             data-original="static/img/index/content/brand7.jpg"></h4>
                    <div class="mask">
                        <i class="iconfont">&#xe635;</i>
                        <p>优惠券 ￥30</p>
                        <a href="#">点击进入</a>
                    </div>
                </li>
                <li class="brand-item">
                    <h4><img src="static/img/index/content/brand8.jpg"
                             data-original="static/img/index/content/brand8.jpg"></h4>
                    <div class="mask">
                        <i class="iconfont">&#xe635;</i>
                        <p>关注人数 108.1万</p>
                        <a href="#">点击进入</a>
                    </div>
                </li>
                <li class="brand-item">
                    <h4><img src="static/img/index/content/brand9.jpg"
                             data-original="static/img/index/content/brand9.jpg"></h4>
                    <div class="mask">
                        <i class="iconfont">&#xe635;</i>
                        <p>优惠券 ￥30</p>
                        <a href="#">点击进入</a>
                    </div>
                </li>
                <li class="brand-item">
                    <h4><img src="static/img/index/content/brand10.jpg"
                             data-original="static/img/index/content/brand10.jpg"></h4>
                    <div class="mask">
                        <i class="iconfont">&#xe635;</i>
                        <p>关注人数 108.1万</p>
                        <a href="#">点击进入</a>
                    </div>
                </li>
                <li class="brand-item">
                    <h4><img src="static/img/index/content/brand11.jpg"
                             data-original="static/img/index/content/brand11.jpg"></h4>
                    <div class="mask">
                        <i class="iconfont">&#xe635;</i>
                        <p>优惠券 ￥30</p>
                        <a href="#">点击进入</a>
                    </div>
                </li>
                <li class="brand-item">
                    <h4><img src="static/img/index/content/brand12.jpg"
                             data-original="static/img/index/content/brand12.jpg"></h4>
                    <div class="mask">
                        <i class="iconfont">&#xe635;</i>
                        <p>关注人数 108.1万</p>
                        <a href="#">点击进入</a>
                    </div>
                </li>
                <li class="brand-item">
                    <h4><img src="static/img/index/content/brand1.jpg"
                             data-original="static/img/index/content/brand1.jpg"></h4>
                    <div class="mask">
                        <i class="iconfont">&#xe635;</i>
                        <p>优惠券 ￥30</p>
                        <a href="#">点击进入</a>
                    </div>
                </li>
                <li class="brand-item">
                    <h4><img src="" data-original="static/img/index/content/brand2.jpg"></h4>
                    <div class="mask">
                        <i class="iconfont">&#xe635;</i>
                        <p>关注人数 108.1万</p>
                        <a href="#">点击进入</a>
                    </div>
                </li>
                <li class="brand-item">
                    <h4><img src="" data-original="static/img/index/content/brand3.jpg"></h4>
                    <div class="mask">
                        <i class="iconfont">&#xe635;</i>
                        <p>优惠券 ￥30</p>
                        <a href="#">点击进入</a>
                    </div>
                </li>
                <li class="brand-item">
                    <h4><img src="" data-original="static/img/index/content/brand4.jpg"></h4>
                    <div class="mask">
                        <i class="iconfont">&#xe635;</i>
                        <p>关注人数 108.1万</p>
                        <a href="#">点击进入</a>
                    </div>
                </li>
                <li class="brand-item">
                    <h4><img src="" data-original="static/img/index/content/brand5.jpg"></h4>
                    <div class="mask">
                        <i class="iconfont">&#xe635;</i>
                        <p>优惠券 ￥30</p>
                        <a href="#">点击进入</a>
                    </div>
                </li>
                <li class="brand-item">
                    <h4><img src="" data-original="static/img/index/content/brand6.jpg"></h4>
                    <div class="mask">
                        <i class="iconfont">&#xe635;</i>
                        <p>关注人数 108.1万</p>
                        <a href="#">点击进入</a>
                    </div>
                </li>
                <li class="brand-item">
                    <h4><img src="" data-original="static/img/index/content/brand7.jpg"></h4>
                    <div class="mask">
                        <i class="iconfont">&#xe635;</i>
                        <p>优惠券 ￥30</p>
                        <a href="#">点击进入</a>
                    </div>
                </li>
                <li class="brand-item">
                    <h4><img src="" data-original="static/img/index/content/brand8.jpg"></h4>
                    <div class="mask">
                        <i class="iconfont">&#xe635;</i>
                        <p>关注人数 108.1万</p>
                        <a href="#">点击进入</a>
                    </div>
                </li>
                <li class="brand-item">
                    <h4><img src="" data-original="static/img/index/content/brand9.jpg"></h4>
                    <div class="mask">
                        <i class="iconfont">&#xe635;</i>
                        <p>优惠券 ￥30</p>
                        <a href="#">点击进入</a>
                    </div>
                </li>
                <li class="brand-item">
                    <h4><img src="" data-original="static/img/index/content/brand10.jpg"></h4>
                    <div class="mask">
                        <i class="iconfont">&#xe635;</i>
                        <p>关注人数 108.1万</p>
                        <a href="#">点击进入</a>
                    </div>
                </li>
                <li class="brand-item">
                    <h4><img src="" data-original="static/img/index/content/brand11.jpg"></h4>
                    <div class="mask">
                        <i class="iconfont">&#xe635;</i>
                        <p>优惠券 ￥30</p>
                        <a href="#">点击进入</a>
                    </div>
                </li>
                <li class="brand-fresh">
                    <a href="#">
                        <i class="iconfont rotate-icon">&#xe62e;</i>
                        <span>换一批</span>
                    </a>
                </li>
            </ul><!-- end brand-list -->
            <ul class="recommend-brand">
                <li>
                    <a href="#">
                        <div class="brand-logo">
                            <img src="" data-original="static/img/index/content/rec1.jpg">
                        </div>
                        <div class="meta">
                            <h4>正夏清爽换新</h4>
                            <p>都是你想要的新品</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="brand-logo">
                            <img src="" data-original="static/img/index/content/rec2.jpg">
                        </div>
                        <div class="meta">
                            <h4>青春就要多彩</h4>
                            <p>岂止是5折</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="brand-logo">
                            <img src="" data-original="static/img/index/content/rec3.jpg">
                        </div>
                        <div class="meta">
                            <h4>荣耀热销手机特惠</h4>
                            <p>购机送百元豪礼</p>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="brand-logo">
                            <img src="" data-original="static/img/index/content/rec4.jpg">
                        </div>
                        <div class="meta">
                            <h4>夏季新品</h4>
                            <p>新品航海熊</p>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </div><!-- end hot-brand -->
    <!-- 之前版本的火热品牌，删除该模块 -->

    <!-- cahnnel -->
    <ul class="channel module">
        <li class="channel-item">
            <h3>
                <i class="iconfont channel-icon">&#xe629;</i>
                <span>潮流前沿</span>
            </h3>
            <div>
                <a class="recommend-item" href="#">
                    <h4>焕新</h4>
                    <p>品牌精选新品</p>
                    <img src="" data-original="static/img/index/content/channel3.jpg">
                </a>
                <span class="seprate"></span>
                <a class="recommend-item" href="#">
                    <h4>全球时尚</h4>
                    <p>大牌精致时尚</p>
                    <img src="" data-original="static/img/index/content/channel1.jpg">
                </a>
            </div>
        </li>
        <li class="channel-item">
            <h3>
                <i class="iconfont channel-icon">&#xe618;</i>
                <span>手机酷玩</span>
            </h3>
            <div>
                <a class="recommend-item" href="#">
                    <h4>天天搞机</h4>
                    <p>品选择下一部手机</p>
                    <img src="" data-original="static/img/index/content/channel2.jpg">
                </a>
                <span class="seprate"></span>
                <a class="recommend-item" href="#">
                    <h4>酷玩街</h4>
                    <p>潮炫创意智能</p>
                    <img src="" data-original="static/img/index/content/channel7.jpg">
                </a>
            </div>
        </li>
        <li class="channel-item">
            <h3>
                <i class="iconfont channel-icon">&#xe624;</i>
                <span>品质生活</span>
            </h3>
            <div>
                <a class="recommend-item" href="#">
                    <h4>必抢</h4>
                    <p>购物券翻倍减</p>
                    <img src="" data-original="static/img/index/content/channel9.jpg">
                </a>
                <span class="seprate"></span>
                <a class="recommend-item" href="#">
                    <h4>喵鲜生</h4>
                    <p>全进口好生鲜</p>
                    <img src="" data-original="static/img/index/content/channel4.jpg">
                </a>
            </div>
        </li>
        <li class="channel-item">
            <h3>
                <i class="iconfont channel-icon">&#xe611;</i>
                <span>国际海购</span>
            </h3>
            <div>
                <a class="recommend-item" href="#">
                    <h4>识货</h4>
                    <p>全球最新最热好货</p>
                    <img src="" data-original="static/img/index/content/channel6.jpg">
                </a>
                <span class="seprate"></span>
                <a class="recommend-item" href="#">
                    <h4>海外直营</h4>
                    <p>海外直采特卖</p>
                    <img src="" data-original="static/img/index/content/channel5.jpg">
                </a>
            </div>
        </li>
        <li class="channel-item last">
            <h3>
                <i class="iconfont channel-icon">&#xe61f;</i>
                <span>个性推荐</span>
            </h3>
            <div>
                <a class="recommend-item" href="#">
                    <h4>布置小家</h4>
                    <p>格调摆件低价</p>
                    <img src="" data-original="static/img/index/content/channel10.jpg">
                </a>
                <span class="seprate"></span>
                <a class="recommend-item" href="#">
                    <h4>疯狂吃货</h4>
                    <p>零食9元起！</p>
                    <img src="" data-original="static/img/index/content/channel8.jpg">
                </a>
            </div>
        </li>
    </ul><!-- end channel -->
    <!-- floor -->
    <div class="floor container">
        <div class="ad">
            <a href="#"><img src="" data-original="static/img/index/content/ad1.jpg"></a>
        </div>
        <div class="floor-QZSG module" id="floor-QZSG">
            <h3 class="module-title">亲子时光
                <i class="data-color-mark"> </i>
                <span>KID & BABY</span>
            </h3>
            <ul class="hot-nav">
                <li><a href="#">童装</a></li>
                <li><a href="#">玩具</a></li>
                <li><a href="#">待产用品</a></li>
                <li><a href="#">文教用品</a></li>
                <li><a href="#">宝宝用品</a></li>
                <li><a href="#">儿童床品</a></li>
                <li><a href="#">奶粉</a></li>
                <li><a href="#">童书</a></li>
                <li><a href="#">纸尿裤</a></li>
            </ul>
            <div class="module-body clear">
                <div class="module-banner">
                    <a href="#">
                        <img src="" data-original="static/img/index/content/QZSG.jpg">
                        <div class="hot-con">
                            <div class="hot-slider">
                                <ul class="slider-list">
                                    <li>乳房护理我最强 &gt;</li>
                                    <li>吸奶家族大集合 &gt;</li>
                                    <li>进口大牌疯狂购 &gt;</li>
                                    <li>乳房护理我最强 &gt;</li>
                                </ul>
                            </div>
                            <div class="hot-recommend">
                                <h4>哺乳妈妈清单</h4>
                                <p>大肚皮日记第6篇</p>
                                <span class="decoration"></span>
                            </div>
                        </div>
                    </a>
                </div>
                <ul class="module-list hot-list">
                    <li>
                        <a href="#">
                            <h4>暑假狂欢季</h4>
                            <p>品牌书包专场</p>
                            <img src="" data-original="static/img/index/content/QZSG4.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>夏季童鞋大爆炸</h4>
                            <p>时尚潮流男童女童凉鞋</p>
                            <img src="" data-original="static/img/index/content/QZSG3.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>卡通纯棉儿童内裤</h4>
                            <p>精美礼盒四条装</p>
                            <img src="" data-original="static/img/index/content/QZSG8.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>夏季尚新</h4>
                            <p>时尚孕妇连衣裙</p>
                            <img src="" data-original="static/img/index/content/QZSG7.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>迪士尼出游季</h4>
                            <p>加厚2CM 健康安全</p>
                            <img src="" data-original="static/img/index/content/QZSG6.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>步步高暑期钜惠</h4>
                            <p>语数外同步点卖</p>
                            <img src="" data-original="static/img/index/content/QZSG5.jpg">
                        </a>
                    </li>
                </ul>
                <ul class="module-list recommend-list">
                    <li>
                        <a href="#">
                            <h4>学习手机</h4>
                            <p>教你做学霸</p>
                            <img src="" data-original="static/img/index/content/QZSG2.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>儿童图书</h4>
                            <p>宝宝都爱读的童话书</p>
                            <img src="" data-original="static/img/index/content/QZSG9.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>暑假狂欢</h4>
                            <p>泳池派对</p>
                            <img src="" data-original="static/img/index/content/QZSG1.jpg">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="floor-HWCX module" id="floor-HWCX">
            <h3 class="module-title">户外出行
                <i class="data-color-mark"> </i>
                <span>OUTDOORS & AUTOMOTIVE</span>
            </h3>
            <ul class="hot-nav">
                <li><a href="#">车秒货</a></li>
                <li><a href="#">皮肤衣</a></li>
                <li><a href="#">运动鞋</a></li>
                <li><a href="#">4s保养</a></li>
                <li><a href="#">宝行车记录仪</a></li>
                <li><a href="#">轮胎</a></li>
            </ul>
            <div class="module-body clear">
                <div class="module-banner">
                    <a href="#">
                        <img src="" data-original="static/img/index/content/HWCX.jpg">
                        <div class="hot-con">
                            <div class="hot-slider">
                                <ul class="slider-list">
                                    <li>夏季套装3折起 &gt;</li>
                                    <li>夏季遮肚保守泳衣 &gt;</li>
                                    <li>抢先购 &gt;</li>
                                    <li>夏季套装3折起 &gt;</li>
                                </ul>
                            </div>
                            <div class="hot-recommend">
                                <h4>三伏天你下水了么</h4>
                                <p>裸价疯抢</p>
                                <span class="decoration"></span>
                            </div>
                        </div>
                    </a>
                </div>
                <ul class="module-list hot-list">
                    <li>
                        <a href="#">
                            <h4>标致2008首发</h4>
                            <p>更有好礼相送</p>
                            <img src="" data-original="static/img/index/content/HWCX9.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>李宁正品女士泳衣</h4>
                            <p>时尚多款速干保守性感</p>
                            <img src="" data-original="static/img/index/content/HWCX2.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>出行必备</h4>
                            <p>涉水穿戴款</p>
                            <img src="" data-original="static/img/index/content/HWCX6.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>互联网汽车节</h4>
                            <p>购物券狂欢送</p>
                            <img src="" data-original="static/img/index/content/HWCX3.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>特步时尚跑鞋</h4>
                            <p>休闲运动男鞋</p>
                            <img src="" data-original="static/img/index/content/HWCX4.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>2016热销爆款</h4>
                            <p>色彩绚丽连体泳衣</p>
                            <img src="" data-original="static/img/index/content/HWCX5.jpg">
                        </a>
                    </li>
                </ul>
                <ul class="module-list recommend-list">
                    <li>
                        <a href="#">
                            <h4>加油卡在线充</h4>
                            <p>中石化9.7折起</p>
                            <img src="" data-original="static/img/index/content/HWCX10.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>大牌内饰新品首发</h4>
                            <p>送抱枕靠腰赢大礼</p>
                            <img src="" data-original="static/img/index/content/HWCX8.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>秋季新品上市</h4>
                            <p>运动或休闲由你定义</p>
                            <img src="" data-original="static/img/index/content/HWCX7.jpg">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="ad">
            <a href="#"><img src="" data-original="static/img/index/content/ad2.jpg"></a>
        </div>
        <div class="floor-DZAC module" id="floor-DZAC">
            <h3 class="module-title">打造爱巢
                <i class="data-color-mark"> </i>
                <span>HOME</span>
            </h3>
            <ul class="hot-nav">
                <li><a href="#">家具</a></li>
                <li><a href="#">大家电</a></li>
                <li><a href="#">四件套</a></li>
                <li><a href="#">健康电器</a></li>
                <li><a href="#">厨房电器</a></li>
                <li><a href="#">吸顶灯</a></li>
                <li><a href="#">平板电视</a></li>
                <li><a href="#">装修设计</a></li>
                <li><a href="#">跑步机</a></li>
            </ul>
            <div class="module-body clear">
                <div class="module-banner">
                    <a href="#">
                        <img src="" data-original="static/img/index/content/DZAC.jpg">
                        <div class="hot-con">
                            <div class="hot-slider">
                                <ul class="slider-list">
                                    <li>免息6期分期 &gt;</li>
                                    <li>韩电102升租房神奇￥568 &gt;</li>
                                    <li>西门子610升冰箱￥5999 &gt;</li>
                                    <li>免息6期分期 &gt;</li>
                                </ul>
                            </div>
                            <div class="hot-recommend">
                                <h4>三精明煮夫保鲜利器</h4>
                                <p>全国免费预约配送入户</p>
                                <span class="decoration"></span>
                            </div>
                        </div>
                    </a>
                </div>
                <ul class="module-list hot-list">
                    <li>
                        <a href="#">
                            <h4>天猫沙发坐具节</h4>
                            <p>买一送一</p>
                            <img src="" data-original="static/img/index/content/DZAC5.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>精明煮夫保险利器</h4>
                            <p>全国免费预约配送入户</p>
                            <img src="" data-original="static/img/index/content/DZAC4.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>家有现代</h4>
                            <p>时尚在手</p>
                            <img src="" data-original="static/img/index/content/DZAC10.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>平米计价更省钱</h4>
                            <p>轻松焕新家</p>
                            <img src="" data-original="static/img/index/content/DZAC1.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>松下品牌特价回馈</h4>
                            <p>一站购齐省心更省薪</p>
                            <img src="" data-original="static/img/index/content/DZAC6.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>夏时遇见</h4>
                            <p>感谢有你</p>
                            <img src="" data-original="static/img/index/content/DZAC7.jpg">
                        </a>
                    </li>
                </ul>
                <ul class="module-list recommend-list">
                    <li>
                        <a href="#">
                            <h4>给父母一个安心</h4>
                            <p>关爱中老年健康</p>
                            <img src="" data-original="static/img/index/content/DZAC9.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>慕思超级品牌日</h4>
                            <p>赢免费欧洲游</p>
                            <img src="" data-original="static/img/index/content/DZAC2.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>暑假有特权</h4>
                            <p>为家服务</p>
                            <img src="" data-original="static/img/index/content/DZAC3.jpg">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="floor-JJSH module" id="floor-JJSH">
            <h3 class="module-title">居家生活
                <i class="data-color-mark"> </i>
                <span>GROCERY & HEALTH</span>
            </h3>
            <ul class="hot-nav">
                <li><a href="#">零食</a></li>
                <li><a href="#">牛奶</a></li>
                <li><a href="#">居家饰品</a></li>
                <li><a href="#">保温瓶</a></li>
                <li><a href="#">保健品</a></li>
                <li><a href="#">常用药</a></li>
                <li><a href="#">热门图书</a></li>
                <li><a href="#">洗发水</a></li>
                <li><a href="#">卫生巾</a></li>
                <li><a href="#">家庭清洁</a></li>
                <li><a href="#">狗粮</a></li>
            </ul>
            <div class="module-body clear">
                <div class="module-banner">
                    <a href="#">
                        <img src="" data-original="static/img/index/content/JJSH.jpg">
                        <div class="hot-con">
                            <div class="hot-slider">
                                <ul class="slider-list">
                                    <li>上上家纺乳胶枕99元 &gt;</li>
                                    <li>百丽丝专柜凉席超值疯抢 &gt;</li>
                                    <li>法国波尔多红酒 &gt;</li>
                                    <li>上上家纺乳胶枕99元 &gt;</li>
                                </ul>
                            </div>
                            <div class="hot-recommend">
                                <h4>家纺品牌特卖</h4>
                                <p>超值疯抢手慢无</p>
                                <span class="decoration"></span>
                            </div>
                        </div>
                    </a>
                </div>
                <ul class="module-list hot-list">
                    <li>
                        <a href="#">
                            <h4>自制酸奶新主义</h4>
                            <p>豪享DIY酸奶美味</p>
                            <img src="" data-original="static/img/index/content/JJSH8.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>乐扣乐扣塑料水杯</h4>
                            <p>韩国欧巴李钟硕代言</p>
                            <img src="" data-original="static/img/index/content/JJSH2.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>健康管家关爱血压</h4>
                            <p>电子智能血压计</p>
                            <img src="" data-original="static/img/index/content/JJSH1.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>法国波尔多红酒</h4>
                            <p>愿品进口 品质保证</p>
                            <img src="" data-original="static/img/index/content/JJSH7.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>特效杀蟑胶饵</h4>
                            <p>夏季除蟑必备</p>
                            <img src="" data-original="static/img/index/content/JJSH3.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>天猫图书</h4>
                            <p>畅销图书让你好看</p>
                            <img src="" data-original="static/img/index/content/JJSH6.jpg">
                        </a>
                    </li>
                </ul>
                <ul class="module-list recommend-list">
                    <li>
                        <a href="#">
                            <h4>汤臣倍健</h4>
                            <p>终于降价了</p>
                            <img src="" data-original="static/img/index/content/JJSH9.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>中华名小吃</h4>
                            <p>唯美食与爱不可辜负</p>
                            <img src="" data-original="static/img/index/content/JJSH5.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>吃货萌宠来袭</h4>
                            <p>爱从喂养开始</p>
                            <img src="" data-original="static/img/index/content/JJSH4.jpg">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="ad">
            <a href="#"><img src="" data-original="static/img/index/content/ad3.jpg"></a>
        </div>
        <div class="floor-CDKW module" id="floor-CDKW">
            <h3 class="module-title">潮店酷玩
                <i class="data-color-mark"> </i>
                <span>ELECTRONICS</span>
            </h3>
            <ul class="hot-nav">
                <li><a href="#">手机</a></li>
                <li><a href="#">iPhone</a></li>
                <li><a href="#">相机</a></li>
                <li><a href="#">数码配件</a></li>
                <li><a href="#">影音电玩</a></li>
                <li><a href="#">生活电器</a></li>
                <li><a href="#">个人护理</a></li>
                <li><a href="#">电脑硬件</a></li>
                <li><a href="#">笔记本</a></li>
            </ul>
            <div class="module-body clear">
                <div class="module-banner">
                    <a href="#">
                        <img src="" data-original="static/img/index/content/CDKW.jpg">
                        <div class="hot-con">
                            <div class="hot-slider">
                                <ul class="slider-list">
                                    <li>12期免息0手续费 &gt;</li>
                                    <li>轻奢5系低至799元 &gt;</li>
                                    <li>新价赢战 不德不爱 &gt;</li>
                                    <li>12期免息0手续费 &gt;</li>
                                </ul>
                            </div>
                            <div class="hot-recommend">
                                <h4>德系血统拜仁精神</h4>
                                <p>限量送43寸智能电视</p>
                                <span class="decoration"></span>
                            </div>
                        </div>
                    </a>
                </div>
                <ul class="module-list hot-list">
                    <li class="hot-item">
                        <a href="#">
                            <h4>夏日鲜机抢先购</h4>
                            <h5>原封国行 顺丰包邮 全网通</h5>
                            <p>iPhoneSE￥2988限时抢</p>
                            <img src="" data-original="static/img/index/content/CDKW6.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>优惠券减200元</h4>
                            <p>高清防水40米</p>
                            <img src="" data-original="static/img/index/content/CDKW5.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>有品3周年庆·</h4>
                            <p>0元抽大奖</p>
                            <img src="" data-original="static/img/index/content/CDKW4.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>电竞影音大联盟</h4>
                            <p>分期免息大额优惠</p>
                            <img src="" data-original="static/img/index/content/CDKW7.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>家务不要你管</h4>
                            <p>疯抢扫地机器人</p>
                            <img src="" data-original="static/img/index/content/CDKW1.jpg">
                        </a>
                    </li>
                </ul>
                <ul class="module-list recommend-list">
                    <li>
                        <a href="#">
                            <h4>妈妈的新潮器时代</h4>
                            <p>关爱永不退场</p>
                            <img src="" data-original="static/img/index/content/CDKW8.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>英特尔超级品牌日</h4>
                            <p>领券最高减1000元</p>
                            <img src="" data-original="static/img/index/content/CDKW3.jpg">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="floor-MLRS module" id="floor-MLRS">
            <h3 class="module-title">美丽人生
                <i class="data-color-mark"> </i>
                <span>FASHION & BEAUTY</span>
            </h3>
            <ul class="hot-nav">
                <li><a href="#">连衣裙</a></li>
                <li><a href="#">T恤男</a></li>
                <li><a href="#">每日护肤</a></li>
                <li><a href="#">休闲男鞋</a></li>
                <li><a href="#">黄金项链</a></li>
                <li><a href="#">单鞋</a></li>
                <li><a href="#">女包</a></li>
                <li><a href="#">文胸</a></li>
                <li><a href="#">大牌腕表</a></li>
            </ul>
            <div class="module-body clear">
                <div class="module-banner">
                    <a href="#">
                        <img src="" data-original="static/img/index/content/MLRS.jpg">
                        <div class="hot-con">
                            <div class="hot-slider">
                                <ul class="slider-list">
                                    <li>吻柔妈妈夏日套装 &gt;</li>
                                    <li>窈窕淑女必备美裙 &gt;</li>
                                    <li>美少女萌萌哒美衣 &gt;</li>
                                    <li>吻柔妈妈夏日套装 &gt;</li>
                                </ul>
                            </div>
                            <div class="hot-recommend">
                                <h4>夏日衣橱大焕新</h4>
                                <p>限量美衣手慢无</p>
                                <span class="decoration"></span>
                            </div>
                        </div>
                    </a>
                </div>
                <ul class="module-list hot-list">
                    <li>
                        <a href="#">
                            <h4>清凉一夏</h4>
                            <p>清爽短袖热卖</p>
                            <img src="" data-original="static/img/index/content/MLRS3.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>酷夏补水有一套</h4>
                            <p>符合东方肤质补水套装</p>
                            <img src="" data-original="static/img/index/content/MLRS9.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>大牌折扣季</h4>
                            <p>全场3折起</p>
                            <img src="" data-original="static/img/index/content/MLRS7.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>丝袜诱惑性感来袭</h4>
                            <p>夏季尚新</p>
                            <img src="" data-original="static/img/index/content/MLRS4.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>木林森男鞋</h4>
                            <p>夏日特惠</p>
                            <img src="" data-original="static/img/index/content/MLRS2.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>暑假大作战</h4>
                            <p>夏季海量新品尚新</p>
                            <img src="" data-original="static/img/index/content/MLRS1.jpg">
                        </a>
                    </li>
                </ul>
                <ul class="module-list recommend-list">
                    <li>
                        <a href="#">
                            <h4>探索夏日新潮流</h4>
                            <p>经典舒适</p>
                            <img src="" data-original="static/img/index/content/MLRS8.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>年轻肌肤的小水库</h4>
                            <p>夏季控油补水保湿套装</p>
                            <img src="" data-original="static/img/index/content/MLRS6.jpg">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <h4>夏装新品抢先购</h4>
                            <p>会员专享新品券</p>
                            <img src="" data-original="static/img/index/content/MLRS5.jpg">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="floor-QJD module" id="floor-QJD">
            <h3 class="module-title">品牌旗舰店 <span>FLAGSHIP STORES</span></h3>
            <ul class="shop-list">
                <c:forEach items="${shopListMap}" var="shopMap" varStatus="vs">
                    <li class="shop-item">
                        <div class="shop-header">
                            <img class="shop-logo" src="" data-original="/static/img/seller/shop/${shopMap.key.shopHead}">
                            <div class="meta shop-meta">
                                <a href="/shop/view_shop.htm?brandId=${shopMap.key.id}">
                                    <h4>${shopMap.key.shopName}</h4>
                                    <p>${shopMap.key.collectCount}粉丝</p>
                                </a>
                            </div>
                            <a class="enter-btn" href="/shop/view_shop.htm?brandId=${shopMap.key.id}" target="_blank">进店看看</a>
                        </div>
                        <ul class="goods-list">
                            <c:forEach items="${shopMap.value}" var="product" varStatus="vs2">
                                <li>
                                   <a href="/buy.htm?pid=${product.id}" target="_blank">
                                       <img class="goods-poster" src="" data-original="${product.productImages.get(0).imagePath}">
                                   </a>
                                    <div class="goods-desc">
                                        <h5>${product.productName}</h5>
                                        <span class="price">￥${product.nowPrice}</span>
                                    </div>
                                </li>
                            </c:forEach>
                        </ul>
                    </li>
                </c:forEach>
            </ul>
        </div>
        <div class="ad">
            <a href="#"><img src="" data-original="static/img/index/content/ad2.jpg"></a>
        </div>
        <div class="floor-CNXH" id="floor-CNXH">
            <h3>
                <span class="text-line">——</span>
                <i class="iconfont">&#xe63d;</i>
                猜你喜欢
                <span class="text-line">——</span>
            </h3>
            <ul class="favorite-list clear">
            </ul>
            <div class="end-favorite"></div>
        </div>
    </div><!-- end floor -->
</div><!-- end content -->
<!-- footer -->
<div id="footer">
    <div class="tmall-ensure ft-container">
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
    </div>
    <div class="tmall-desc ft-container">
        <dl class="guide">
            <dt>购物指南</dt>
            <dd>
                <a href="#">免费注册</a>
                <a href="#">开通支付宝</a>
                <a href="#">支付宝充值</a>
            </dd>
        </dl>
        <dl class="safeguard">
            <dt>天猫保障</dt>
            <dd>
                <a href="#">发票保障</a>
                <a href="#">售后规则</a>
                <a href="#">缺货赔付</a>
            </dd>
        </dl>
        <dl class="pay">
            <dt>支付方式</dt>
            <dd>
                <a href="#">快捷支付</a>
                <a href="#">信用卡</a>
                <a href="#">余额宝</a>
                <a href="#">蚂蚁花呗</a>
                <a href="#">货到付款</a>
            </dd>
        </dl>
        <dl class="seller">
            <dt>商家服务</dt>
            <dd>
                <a href="#">商家入驻</a>
                <a href="#">商家中心</a>
                <a href="#">天猫智库</a>
                <a href="#">天猫规则</a>
                <a href="#">物流服务</a>
                <a href="#">喵言喵语</a>
                <a href="#">运营服务</a>
            </dd>
        </dl>
        <dl>
            <dt>手机天猫</dt>
            <dd>
                <a href="#"><img src="static/img/index/moblie-ewm.png" alt="手机天猫APP"></a>
            </dd>
        </dl>
    </div>
    <div class="tmall-copyright">
        <div class="cr-container">
            <p class="footer-tmallinfo">
                <a href="#">关于天猫</a>
                <a href="#">帮助中心</a>
                <a href="#">开放平台</a>
                <a href="#">诚聘英才</a>
                <a href="#">联系我们</a>
                <a href="#">网站合作</a>
                <a href="#">法律声明</a>
                <a href="#">知识产权</a>
                <a href="#">廉正举报</a>
                <a href="#">规则意见征集</a>
            </p>
            <p class="footer-otherlinks">
                <a href="#">阿里巴巴集团</a> |
                <a href="#">淘宝网</a> |
                <a href="#">天猫</a> |
                <a href="#">聚划算</a> |
                <a href="#">全球速卖通</a> |
                <a href="#">阿里巴巴国际交易市场</a> |
                <a href="#">1688</a> |
                <a href="#">阿里妈妈</a> |
                <a href="#">阿里旅行.去啊</a> |
                <a href="#">阿里云计算</a> |
                <a href="#">YunOS</a> |
                <a href="#">阿里通信</a> |
                <a href="#">万网</a> |
                <a href="#">高德</a> |
                <a href="#">优视</a> |
                <a href="#">友盟</a> |
                <a href="#">虾米</a> |
                <a href="#">天天动听</a> |
                <a href="#">来往</a> |
                <a href="#">钉钉</a> |
                <a href="#">支付宝</a>
            </p>
            <div class="footer-copyright">
                <span>增值电信业务经营许可证：<a href="#">浙B2-20110446</a></span>
                <span>网络文化经营许可证：<a href="#">浙网文[2015]0295-065号</a></span>
                <span>互联网医疗保健信息服务 审核同意书 浙卫网审【2014】6号</span><br>
                <span>互联网药品信息服务资质证书编号：浙-（经营性）-2012-0005</span>
                <b>@2003-2016TMALL.COM版权所有</b>
            </div>
            <p>
                <a href="#"><img src="static/img/index/copyright1.jpg"></a>
                <a href="#"><img src="static/img/index/copyright2.jpg"></a>
            </p>
        </div>
    </div>
    <div class="server-number">wormholesource010178013222.n.et2.production</div>
</div><!-- end footer -->
<div id="top-search">
    <div class="container ts-container">
        <div class="iconfont top-icon">
            &#xe632;
        </div>
        <div class="form">
            <form method="post" action="/search_product.htm" id="top-form" data-active="false">
                <fieldset>
                    <legend>天猫搜索</legend>
                    <input type="text" name="enter" value="" title="请输入搜索内容">
                    <input type="submit" name="search-btn" value="搜索">
                </fieldset>
            </form>
            <ul class="search-tip">
            </ul>
        </div>
    </div>
</div>
<ul id="floor-nav">
    <li class="nav-header">导航</li>
    <li><a href="#floor-QZSG" data-color="#f7a945">亲子时光</a></li>
    <li><a href="#floor-HWCX" data-color="#19c8a9">户外出行</a></li>
    <li><a href="#floor-DZAC" data-color="#f15453">打造爱巢</a></li>
    <li><a href="#floor-JJSH" data-color="#64c333">居家生活</a></li>
    <li><a href="#floor-CDKW" data-color="#0aa6e8">潮店酷玩</a></li>
    <li><a href="#floor-MLRS" data-color="#ea5f8d">美丽人生</a></li>
    <li><a href="#floor-QJD" data-color="#dd2727">品牌旗舰</a></li>
    <li><a href="#floor-CNXH" data-color="#dd2727">猜你喜欢</a></li>
    <li class="nav-back"><a href="#site-nav"><i class="iconfont">&#xe62d;</i>顶部</a></li>
</ul>
<div id="tip-bar">
    <div class="bar-con">
        <div id="top-blank"></div>
        <a href="#" class="privilege">
            <i class="iconfont tip-icon default">&#xe639;</i>
            <img class="logged" src="static/img/index/privilege.jpg">
            <div class="tip">
                <span>我的特权</span>
                <b class="triangle"></b>
            </div>
        </a>
        <a href="#" class="property">
            <i class="iconfont tip-icon">&#xe642;</i>
            <div class="tip">
                <span>我的资产</span>
                <b class="triangle"></b>
            </div>
        </a>
        <a href="#">
            <i class="iconfont tip-icon">&#xe610;</i>
            <div class="tip">
                <span>我关注的品牌</span>
                <b class="triangle"></b>
            </div>
        </a><a href="#">
        <i class="iconfont tip-icon">&#xe617;</i>
        <div class="tip">
            <span>我的收藏</span>
            <b class="triangle"></b>
        </div>
    </a>
        <a href="#">
            <i class="iconfont tip-icon">&#xe612;</i>
            <div class="tip">
                <span>我看过的</span>
                <b class="triangle"></b>
            </div>
        </a>
        <a href="#">
            <i class="iconfont tip-icon">&#xe63e;</i>
            <div class="tip">
                <span>我要充值</span>
                <b class="triangle"></b>
            </div>
        </a>
        <a href="#" class="feed-back">
            <i class="iconfont tip-icon">&#xe616;</i>
            <div class="tip">
                <span>用户反馈</span>
                <b class="triangle"></b>
            </div>
        </a>
        <a href="#" class="qrcode">
            <i class="iconfont tip-icon">&#xe641;</i>
            <div class="tip">
                <div class="tip-inner">
                    <img class="ewm" src="static/img/index/ewm.png" alt="二维码">
                    <img class="award" src="static/img/index/award.png" alt="福利">
                </div>
                <b class="triangle"></b>
            </div>
        </a>
    </div>
    <a href="#" class="shopping-cart">
        <div class="wrap">
            <i class="iconfont tip-icon">&#xe615;</i>
            购物车
            <span class="cart-count logged default"></span>
        </div>
    </a>
    <a href="#site-nav" class="back-top">
        <i class="iconfont tip-icon">&#xe633;</i>
        <div class="tip">
            <span>返回顶部</span>
            <b class="triangle"></b>
        </div>
    </a>
</div>

<!-- 固定定位：天猫搜索 -->
<div class="as-shelter">
    <div id="J_ASTotalContainer" class="as-total-container" style="display: none">
        <div id="J_AttachedSearchContainer" class="attached-search-container" style="display: none">
            <div class="fp-iconfont-new">
                <i class="iconfont icon-tianmaotmall logo-tmall"></i>
            </div>

            <div id="mallSearch" style="display: block">
                <form class="mallSearch-form" action="/search_product.htm">
                    <fieldset>
                        <div class="mallSearch-input clearfix">
                            <div id="s-combobox-117" class="s-combobox">
                                <div class="s-combobox-input-wrap">
                                    <input name="enter" id="mq" class="s-combobox-input" type="text" title="请输入搜索文字">
                                </div>
                                <label class="s-combobox-placeholder"
                                       style="color:rgb(102, 102, 102); visibility: visible">搜索 天猫 商品/品牌/店铺</label>
                            </div>
                            <button type="submit">
                                搜索
                                <s></s>
                            </button>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
</div>


<!-- 固定定位：天猫导航 -->
<div id="J_FpLift" class="mui-lift" style="display: none;">
    <div class="sn-nav-wrapper" style="display: block; overflow:hidden;">
        <div class="mui-lift-nav nav-header">导航</div>
        <div>
            <a id="J_FloorNavMRTJ" class="mui-lift-nav" href="#" target="_self" data-color="#FFAD00"
               data-location="1184">
                <div class="mui-lift-nav-name">每日推荐</div>
            </a>
            <a id="J_FloorNavQZSG" class="mui-lift-nav" href="#" target="_self" data-color="#E6F35F"
               data-location="1843">
                <div class="mui-lift-nav-name">亲子时光</div>
            </a>
            <a id="J_FloorNavHWCX" class="mui-lift-nav" href="#" target="_self" data-color="#808271"
               data-location="2347">
                <div class="mui-lift-nav-name">户外出行</div>
            </a>
            <a id="J_FloorNavDZAC" class="mui-lift-nav" href="#" target="_self" data-color="#EA5F8D"
               data-location="2972">
                <div class="mui-lift-nav-name">打造爱巢</div>
            </a>
            <a id="J_FloorNavJJSH" class="mui-lift-nav" href="#" target="_self" data-color="#C6E841"
               data-location="3477">
                <div class="mui-lift-nav-name">居家生活</div>
            </a>
            <a id="J_FloorNavCDKW" class="mui-lift-nav" href="#" target="_self" data-color="#0AA6E8"
               data-location="4102">
                <div class="mui-lift-nav-name">潮电酷玩</div>
            </a>
            <a id="J_FloorNavMLRS" class="mui-lift-nav" href="#" target="_self" data-color="#EA5F8D"
               data-location="4590">
                <div class="mui-lift-nav-name">美丽人生</div>
            </a>
            <a id="J_FloorNavPPQJ" class="mui-lift-nav" href="#" target="_self" data-color="#353FE8"
               data-location="5100">
                <div class="mui-lift-nav-name">品牌旗舰</div>
            </a>
            <a id="J_FloorNavCNXH" class="mui-lift-nav" href="#" target="_self" data-color="#FF0308"
               data-location="5900">
                <div class="mui-lift-nav-name">猜你喜欢</div>
            </a>
            <!-- top -->
            <a class="mui-lift-nav nav-back j_navBack" href="#">
                <i class="fp-iconfont iconfont icon-shangjiantou1"></i>
                <div>顶部</div>
            </a>
        </div>
    </div>
</div>
<div id="ks-component863" class="s-popupmenu s-menu s-popupmenu-hidden s-menu-hidden" role="menu"
     style="user-select: none; left: 676px; top: 187px; width: 491px;">
    <div id="ks-content-ks-component863" class="s-popupmenu-content s-menu-content">

    </div>
        <div id="ks-component2305" class="s-menuitem find-shop" role="menuitem" style="user-select: none; display: none">
            <div class="s-mi-tip"></div>
        </div>
        <div id="ks-component2361" class="s-menuitem s-menuitem-disabled ks-component-child268" aria-disabled="true"
             role="menuitem" style="user-select: none;"><p class="s-mi-qs"><i></i>按快捷键 <em>shift</em> + <em>?</em>
            可以随时打开快捷搜索框，赶紧试试吧~</p>
        </div>
    </div>
</div>

</body>

<script>
    new Vue().$mount('#banner');
</script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/sockjs/1/sockjs.min.js"></script>
<!-- 图片懒加载 -->
<script type="text/javascript" charset="utf-8">
    $(function () {
        $("img").lazyload({
            effect: "fadeIn",
            placeholder: "//img.lanrentuku.com/img/allimg/1212/5-121204193955-51.gif" //用图片提前占位
        });
    });

    $(".search").keyup(function () {
        var value = $(this).val();
        if(value.length > 0) {
            showReturnDialog(value);
        } else{
            $("#ks-component863").addClass("s-popupmenu-hidden s-menu-hidden");
        }
    }).blur(function () {
        setTimeout(function () {
            $("#ks-component863").addClass("s-popupmenu-hidden s-menu-hidden");
        }, 100);
    }).focus(function () {
        var value = $(this).val();
        if(value.length > 0) {
            showReturnDialog(value);
        }
    })

    function showReturnDialog(value) {
        if(value.length > 0) {
            $("#ks-component863").removeClass("s-popupmenu-hidden s-menu-hidden");
            $(".s-popupmenu-content").html("");
            $.post("/searchReturn.htm", {"value": value}, function (res) {
                let response = eval("(" + res + ")");
                console.log(response.data)
                for (let i = 0; i < response.data.length; i++) {
                    var key = response.data[i]['text'];
                    var val = response.data[i]['searchCount'];
                    $(".s-popupmenu-content").append($("<div id='ks-component1745' class='s-menuitem ks-component-child268' data-keyword='"+key+"' role='menuitem' style='user-select: none;'>\n" +
                        "            <div class='s-mi-list'>\n" +
                        "                <span class='s-mi-cont-key'>" + value + "<b>" + key.toString().substring(value.length) + "</b></span>\n" +
                        "                <span class='s-mi-cont-count'>约" + val + "个结果</span><a class='s-mi-btn-backfill' href='javascript:;'>回填</a>\n" +
                        "            </div>\n" +
                        "        </div>"));
                }
        if(response.data.length < 1){
            $(".s-mi-tip").show().text("暂无数据，请换一个关键字试试吧");
        } else{
            $(".s-mi-tip").hide().text("");
        }
            });
        }
    }

    // 点击选项，搜索某个关键字
    $("body").on("click", ".s-menuitem", function () {
        var value = $(this).attr("data-keyword");
        window.location.href = "/search_product.htm?enter="+value;
    })

    // 搜索之前，必须输入
    $("#search").submit(function () {
        var value = $(".search").val().replace(/\s*/g,"");
        $(".search").val(value);
        if(value.length < 1){
            $(".search").attr("placeholder", "请输入关键字");
            $(".search").addClass("arrow_box");
            setTimeout(function () {
                $(".search").removeClass("arrow_box");
            }, 1200);
            return false;
        }
    })

    // 搜索框
    $(window).resize(function() {
        var heights = $(window).height();
        var widths = $(window).width();
        var $x = $("#search").offset().left;
        var $y = $("#search").offset().top;
        $(".s-popupmenu").css({"left":$x+"px"});
    });

</script>

